<template>
  <div class="main">
    <el-row :gutter="20">
      <el-col :span="4">
        <p class="label-form"> 申请单号：</p>
        <el-input v-model="queryParams.orderSn"  placeholder="申请单号"></el-input>
      </el-col>
      <el-col :span="4">
        <p class="label-form"> 用户手机号：</p>
        <el-input v-model="queryParams.userPhone"  placeholder="用户手机号"></el-input>
      </el-col>

<!--      <el-col :span="4">-->
<!--        <p class="label-form"> 状态：</p>-->
<!--        <el-select style="width: 100%;" clearable v-model="queryParams.type" placeholder="请选择">-->
<!--          <el-option-->
<!--            v-for="item in messageType"-->
<!--            :key="item.dictValue"-->
<!--            :label="item.dictLabel"-->
<!--            :value="Number(item.dictValue)">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </el-col>-->
      <el-col :span="4">
        <p class="label-form"> 时间：</p>
        <el-date-picker
          clearable
          v-model="createTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-col>
      <el-col :span="6" style="margin-left: 150px">
        <p class="label-form"></p>
        <el-button type="primary" @click="getSelect"  icon="el-icon-search">搜索</el-button>
        <el-button type="warning" @click="resert" icon="el-icon-refresh-right">重置</el-button>
      </el-col>
    </el-row>

    <!--    <el-row :gutter="20" style="margin-top: 10px">-->
    <!--      <el-col :span="4">-->
    <!--        <el-button @click="addShop" type="primary" icon="el-icon-plus">新增</el-button>-->
    <!--      </el-col>-->
    <!--    </el-row>-->

    <el-table :data="tableData"
              row-key="id"
              max-height="600"
              :expand-row-keys="expandedRowKeys"
              @expand-change="handleExpand"
              border style="margin-top: 30px">

      <el-table-column prop="id" align="center" min-width="80" label="ID"></el-table-column>
      <el-table-column prop="orderSn" min-width="200" label="申请单号"></el-table-column>
      <el-table-column prop="userPhone" width="200"  label="用户手机号 "></el-table-column>
      <el-table-column prop="licensePlate" width="200"  label="车牌号 "></el-table-column>
      <el-table-column prop="question" width="200" show-overflow-tooltip label="问题描述 "></el-table-column>

      <el-table-column prop="status" width="200" label="审核意见">
        <template slot-scope="scope">
          <p>待安装 </p>
        </template>
      </el-table-column>
      <el-table-column prop="storeName" width="200"  label="安装门店 "></el-table-column>
      <el-table-column prop="storeAddress" width="200"  label="店铺位置 "></el-table-column>
      <el-table-column prop="price" label="轮胎位置" min-width="150">
        <template slot-scope="scope">

          {{position(Number(scope.row.position))}}
        </template>
      </el-table-column>
      <el-table-column prop="code" label="条形码" min-width="150">  </el-table-column>
      <el-table-column prop="patnm" label="花纹" min-width="150"> </el-table-column>
      <el-table-column prop="spcnm" label="规格" min-width="150"></el-table-column>
      <el-table-column prop="brnm" label="品牌" min-width="150"></el-table-column>
      <el-table-column prop="erpid" label="物料编码" min-width="150"></el-table-column>
      <el-table-column prop="scmnm" label="客户编码" min-width="150"></el-table-column>
      <el-table-column prop="dot" label="DOT" min-width="150"></el-table-column>


      <el-table-column width="200"  label="安装状态 ">
        <template slot-scope="scope">
          {{scope.row.status===1 ? '未安装':'已安装'}}
        </template>
      </el-table-column>
      <el-table-column min-width="180"  prop="status" label="创建时间">
        <template slot-scope="scope">
          {{ parseTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" width="220" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="verifyDetail(scope.row)">查看详情</el-button>
          <el-button type="primary" v-if="scope.row.status===1" @click="installTyres(scope.row)" size="mini">安装轮胎</el-button>
        </template>
      </el-table-column>
    </el-table>





    <el-dialog
      title="轮胎信息"
      :visible.sync="replaceShow"
      width="1200px"
      :before-close="closeReplace">
      更换前
      <el-table
        :data="replaceBefore"
        border
        style="width: 100%">
        <el-table-column prop="code" label="条形码" min-width="150">  </el-table-column>
        <el-table-column prop="patnm" label="花纹" min-width="150"> </el-table-column>
        <el-table-column prop="spcnm" label="规格" min-width="150"></el-table-column>
        <el-table-column prop="dot" label="DOT" min-width="150"></el-table-column>
        <el-table-column prop="brnm" label="品牌" min-width="150"></el-table-column>
        <el-table-column prop="erpid" label="物料编码" min-width="150"></el-table-column>
        <el-table-column prop="scmnm" label="客户编码" min-width="150"></el-table-column>
        <el-table-column prop="createTime" label="安装时间" min-width="180">
          <template slot-scope="scope">

            {{parseTime(scope.row.createTime)}}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="轮胎位置" min-width="150">
          <template slot-scope="scope">

            {{position(scope.row.position)}}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="是否允许理赔" min-width="150">
          <template slot-scope="scope">

            {{scope.row.isReparation ===1 ? '否':'是'}}
          </template>
        </el-table-column>
      </el-table>
      <div class="box-nav">
        <el-button type="primary" @click="installTyre">录入轮胎</el-button>
      </div>
      更换后
      <el-table
        :data="replaceAfter"
        border
        style="width: 100%">
        <el-table-column prop="code" label="条形码" min-width="150">  </el-table-column>
        <el-table-column prop="patnm" label="花纹" min-width="150"> </el-table-column>
        <el-table-column prop="spcnm" label="规格" min-width="150"></el-table-column>
        <el-table-column prop="dot" label="DOT" min-width="150"></el-table-column>
        <el-table-column prop="brnm" label="品牌" min-width="150"></el-table-column>
        <el-table-column prop="createTime" label="安装时间" min-width="180">
          <template slot-scope="scope">

            {{parseTime(scope.row.createTime)}}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="轮胎位置" min-width="150">
          <template slot-scope="scope">

            {{position(scope.row.position)}}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="是否允许理赔" min-width="150">
          <template slot-scope="scope">

            {{scope.row.isReparation ===1 ? '否':'是'}}
          </template>
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">

        <el-button type="primary" @click="closeReplaceForm">取消</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="申请详情"
      :visible.sync="payStatus"
      width="1200px"
      :before-close="handleClosePayStatus">
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="申请单号">{{form.orderSn}}</el-form-item>
        <el-form-item label="用户手机号">{{form.userInfo.phone}}</el-form-item>
        <el-form-item label="车牌号">{{form.carInfo.licensePlate}}</el-form-item>
        <el-form-item label="理赔轮胎">
          <el-table
            size="mini"
            :data="tyreListArray"
            border
            style="width: 100%">
            <el-table-column prop="code" label="条形码" min-width="150">  </el-table-column>
            <el-table-column prop="patnm" label="花纹" min-width="150"> </el-table-column>
            <el-table-column prop="spcnm" label="规格" min-width="150"></el-table-column>
            <el-table-column prop="dot" label="DOT" min-width="150"></el-table-column>
            <el-table-column prop="brnm" label="品牌" min-width="150"></el-table-column>
            <el-table-column prop="createTime" label="安装时间" min-width="180">
              <template slot-scope="scope">

                {{parseTime(scope.row.createTime)}}
              </template>
            </el-table-column>
            <el-table-column prop="price" label="轮胎位置" min-width="150">
              <template slot-scope="scope">

                {{position(scope.row.position)}}
              </template>
            </el-table-column>
            <el-table-column prop="price" label="是否允许理赔" min-width="150">
              <template slot-scope="scope">

                {{scope.row.isReparation ===1 ? '否':'是'}}
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>

        <el-form-item label="理赔图片">
          <el-image style="width: 100px; height: 100px;margin-left: 10px" :src="form.request.carImg" :preview-src-list="[form.request.carImg]"></el-image>
          <el-image style="width: 100px; height: 100px;margin-left: 10px" :src="form.request.dotImg" :preview-src-list="[form.request.dotImg]"></el-image>
          <el-image style="width: 100px; height: 100px;margin-left: 10px" :src="form.request.driveLicenseImg" :preview-src-list="[form.request.driveLicenseImg]"></el-image>
          <el-image style="width: 100px; height: 100px;margin-left: 10px" :src="form.request.pattenImg" :preview-src-list="[form.request.pattenImg]"></el-image>
          <el-image style="width: 100px; height: 100px;margin-left: 10px" :src="form.request.img" :preview-src-list="[form.request.img]"></el-image>
        </el-form-item>
        <el-form-item label="鼓包视频" v-if="form.request.videoUrl">
          <video class="video" :src="form.request.videoUrl"
                 controls autoplay="false" preload="metadata"
                 :show-center-play-btn="true" :enable-progress-gesture="true" :initial-time="0"
                 :object-fit="'contain'" :show-loading="true" :show-mute-btn="true"
          />

        </el-form-item>
        <el-form-item label="安装门店">{{form.storeInfo.name}}</el-form-item>
        <el-form-item label="店铺位置">{{form.storeInfo.address}}</el-form-item>
        <el-form-item label="轮胎品牌">{{form.tyre.name}}</el-form-item>
        <el-form-item label="问题描述">{{form.request.question}}</el-form-item>
        <el-form-item label="审核状态">
          {{form.request.isAudit === 1 ? '已审核':'未审核'}}
        </el-form-item>
        <el-form-item label="备注">
          {{ form.request.reply || '暂无描述' }}
        </el-form-item>
        <!--        <el-form-item label="创建时间">-->
        <!--          {{ parseTime(form.createTime) }}-->
        <!--        </el-form-item>-->
      </el-form>

      <span slot="footer" class="dialog-footer">

        <el-button type="primary" @click="payStatus = false">关闭</el-button>
      </span>
    </el-dialog>


    <div class="box-pager">
      <pagination
        v-show="pager.total>0"
        :total="pager.total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getListsPage"
      />
    </div>
    <div class="safe"></div>


  </div>
</template>

<script>
import {parseTime} from "@/utils/ruoyi";
import axios from "axios";
import {
  claimApplicationList,
  claimApplicationListById, claimRequestEdit,
  getDict,
  getEquipment,
  getRequestArray, getTyreByCode,
  updateRequestStatus,
  userTyreList
} from "@/api/apiFox";

export default {
  data() {
    return {
      updateTyreForm:{},
      currentPage1: 5,
      value1: '',
      pager: {
        total:10
      },
      createTime:[],
      replaceShow:false,
      replaceBefore:[],
      replaceAfter:[],
      formData:{},
      form: {
        userInfo:{},
        carInfo:{},
        request:{},
        storeInfo:{},
        tyre:{}
      },
      dialogVisible: false,
      isEdit: false,
      payStatus:false,
      dialogVisibleTyre:false,
      mark: {lng: '', lat: ''},
      content:"",
      tyreListArray:[],
      materialScienceList:[
        {id:1,name:"螺栓",num:"1",price:"25.15"}
      ],
      tyreList:[],
      tableData: [],
      queryParams:{
        pageNum:1,
        pageSize:10,
        userPhone:"",
        status:1,
        type:"",
        orderSn:""
      },
      loading:false,
      messageType:[],
      expandedRowKeys:[],
      options: [
        {value: 0, label: '待审核'},
        {value: 1, label: '已审核'},
        {value: 2, label: '已完成'},
        {value: 3, label: '已驳回'},
      ],
      postions:[
        {value: 1, label: '左前'},
        {value: 2, label: '右前'},
        {value: 3, label: '左后'},
        {value: 4, label: '右后'},
      ],
      optionsType:[],
    }
  },
  created() {
    this.getDictList('apply_status')
    this.getDictList2('apply_status')
  },
  watch:{
    createTime(newValue,oldValue){
      console.log(newValue)
      if (newValue && newValue.length>0){
        this.queryParams.beginTime = parseTime(newValue[0])
        this.queryParams.endTime = parseTime(newValue[1])
      }else{
        this.queryParams.beginTime = null
        this.queryParams.endTime =null
      }
    }
  },
  mounted() {
    this.getLists(this.queryParams)
  },
  methods: {
    verifyDetail(item){
      this.payStatus = true
      claimApplicationListById({id:item.id}).then(res=>{
        this.form = res
        this.tyreListArray = [res.beforeTyreInfo]
      }).catch(err=>{
        this.payStatus=false
      })
    },
    getDictList(item){
      getDict(item).then(res=>{
        console.log(res)
        this.messageType = res
      })
    },
    getDictList2(item){
      getDict(item).then(res=>{
        this.optionsType = res
      })
    },
    getListsPage(e){
      this.queryParams.pageNum = e.page
      this.queryParams.pageSize = e.limit
      this.getLists(this.queryParams)
    },
    resert(){
      this.queryParams={
        pageNum:1,
        pageSize:10,
        phone:"",
        status:1,
        type:""
      }
      this.getLists(this.queryParams)
    },
    getSelect(){
      this.getLists(this.queryParams)
    },
    parseTime,
    getLists(params) {
      claimApplicationList(params).then(res=>{
        console.log(res)
        this.pager.total=res.total
        this.tableData =res.rows
      })
    },

    handleExpand(row,expandedRows) {
      this.loading=true
      const currentRowId = row.id;
      this.tyreForm = row
      const index = this.expandedRowKeys.indexOf(currentRowId);
      if (index === -1) {

        this.expandedRowKeys = [currentRowId];
      } else {
        this.expandedRowKeys = [];
      }
      console.log(row)
      this.getTyre(row.carId)
    },

    closeReplace(){
      this.replaceShow=false
      this.replaceBefore=[]
      this.replaceAfter = []
    },
    installTyres(item){
      claimApplicationListById({id:item.id}).then(res=>{
        this.replaceShow=true
        this.form = res
        this.replaceBefore = [res.beforeTyreInfo]
      }).catch(err=>{
        this.replaceShow=false
      })
    },

    installTyre(){
      this.$prompt('轮胎单号', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        console.log(value)
        getTyreByCode({barcode:value}).then(res=>{
          let result = this.arrayToObject(res)
          console.log(result)
          this.replaceAfter = [
            {
              code:value,
              tyreId:this.form.beforeTyreInfo.id,
              position:this.form.beforeTyreInfo.position,
              ...result
            }
          ]
          this.updateTyreForm =   {
            id:this.form.request.id,
            code:value,
            status:2,
            tyreId:this.form.beforeTyreInfo.id,
            ...result
          }
        }).catch(err=>{})
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },

    closeReplaceForm(){
      this.replaceShow =false
      this.updateTyreForm={}
      this.replaceBefore=[]
      this.replaceAfter = []
      this.getLists(this.queryParams)
    },
    submitForm(){
      let form ={
        id: this.updateTyreForm.id,
        tyreId:this.form.beforeTyreInfo.id,
        status: 2,
        code: this.updateTyreForm.code,
        dotImg: this.updateTyreForm.dot,
        pattenImg:this.updateTyreForm.patnm,
        driveLicenseImg: this.updateTyreForm.spcnm
      }
      claimRequestEdit(form).then(res=>{

        this.$message.success('处理成功')
        this.closeReplaceForm()
      }).catch(err=>{ this.closeReplaceForm()})
    },
    getTyre(item){
      userTyreList({carId:item}).then(res=>{
        console.log(res)
        this.tyreList = res.data
        this.loading=false
      })
    },

    addType(e){
      this.formData={}
      this.dialogVisibleTyre = true
    },



    reject(row){
      this.$prompt('请输入驳回理由', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        updateRequestStatus({id:row.id,status:3,reply:value}).then(res=>{
          this.$message.success('已驳回')
          this.getLists(this.queryParams)
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },


    handleCloseTyre(){
      this.dialogVisibleTyre =false
    },
    handleClosePayStatus(){
      this.payStatus = false
    },
    setMark(e) {
      console.log(e)
      this.mark = {lng: e.point.lng, lat: e.point.lat}
      this.reverseGeocode(e.point.lat,e.point.lng)
    },
    updateShop(item) {
      this.dialogVisible = true
      this.form = item
      this.mark = {lng: item.longitude, lat: item.latitude}
      this.center = {lng: item.longitude, lat: item.latitude}
      this.isEdit = true
    },
    viewShop(item) {
      this.dialogVisible = true
      this.form = item
      this.mark = {lng: item.longitude, lat: item.latitude}
      this.center = {lng: item.longitude, lat: item.latitude}
      this.isEdit = false
    },
    addShop() {
      this.dialogVisible = true
      this.form = {}
      this.isEdit = false
    },
    deleteTyre(item){
      console.log(item)
    },
    position(val) {
      switch (val) {
        case 1: {
          return '左前'
        }
        case 2: {
          return '右前'
        }
        case 3: {
          return '左后'
        }
        case 4: {
          return '右后'
        }
      }
    },

    handleClose() {
      this.dialogVisible = false
    },
    status(val) {
      switch (val) {
        case 0: {
          return '待审核'
        }
        case 1: {
          return '已审核'
        }
        case 2: {
          return '已完成'
        }
        case 3: {
          return '已驳回'
        }

      }
    },



    arrayToObject(arr) {
      return arr.reduce((obj, item) => {
        let [key, value] = item.split(": ");
        obj[key] = value; // 添加键值对
        return obj;
      }, {});
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
}
</script>


<style scoped lang="scss">
.map {
  width: 100%;
  height: 300px;
}
.video{
  width: 500px;
  height: 300px;
  object-fit: contain;
  border-radius: 5px;
}
.main {
  width: 100%;
  min-height: 100vh;
  padding: 30px;
  box-sizing: border-box;

  .label {
    font-size: 14px;
    height: 20px;
    margin-bottom: 5px;
  }
}

.grid-content {
  height: 40px;
  text-align: right;
  line-height: 40px;
}

.bg-purple {
  font-size: 14px;
  color: #3f3f3f;
}
.box-nav{
  width: 100%;
  margin: 20px 0;

}
.box-item{
  width: 100%;
  .title{
    font-size: 12px;
    color: #1e1e1e;
    font-weight: 600;
    margin: 0;
  }
  .title-content{
    width: 100%;
    font-size: 12px;
    color: #2c3e50;
    margin: 0;
  }
}
</style>
